<template>
	<view>
		<z-nav-bar :bgColor="['#3699ff', '#0075ee']" bgColorAngle="90" fontColor="#FFF" homeState="2000" backState="2000">
			<view slot="left">
				<image
					style="width: 60rpx;height: 60rpx;margin-left: 20rpx;margin-top: 15rpx;"
					src="https://qykh.shopec.com.cn/image-server/dz/home_avator.png"
					mode="aspectFill"
					@click="showLoginOut = !showLoginOut"
				></image>
			</view>
			<view class="title-box"><text>首页</text></view>
		</z-nav-bar>
		<u-sticky :offsetTop="offsetTop">
			<view class="tenantBox" @click="showTenant = !showTenant">
				<text style="margin-right: 8rpx;">{{ currentTenantObj.tenantName }}</text>
				<u-icon name="arrow-down"></u-icon>
			</view>
		</u-sticky>
		<!-- 车主车辆信息 -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="mainBox">
				<view class="carItem" v-for="(item, index) in list" :key="item.id" @click="goDetail(item)">
					<view class="carInfo flex-row-center-sb">
						<view>
							<view class="carNo">{{ item.carNo }}</view>
							<view class="carModel">{{ item.carBrandName }}/{{ item.carSeriesName }}/{{ item.carModelName }}</view>
						</view>
						<text class="carStatus" :class="{ active: item.carStatus == 4 }">{{ item.carStatus == 4 ? '在租' : '空闲' }}</text>
					</view>
					<view class="carStatistics">
						<u-grid :col="2" :border="true">
							<!-- <u-grid-item>
								<view class="tjItem flex-colum-center">
									<text class="title">本月出租天数</text>
									<text class="value">{{ item.currRentOutDays || 0 }}天</text>
								</view>
							</u-grid-item>
							<u-grid-item>
								<view class="tjItem flex-colum-center">
									<text class="title">本月出租率</text>
									<text class="value">{{ item.currRentalRate || 0 }}%</text>
								</view>
							</u-grid-item> -->
							<u-grid-item>
								<view class="tjItem flex-colum-center">
									<text class="title">本月订单数</text>
									<text class="value">{{ item.currOrderNumber || 0 }}笔</text>
								</view>
							</u-grid-item>
							<u-grid-item>
								<view class="tjItem flex-colum-center">
									<text class="title">本月收取租金</text>
									<text class="value">{{ item.currCollectingRent || 0 }}元</text>
								</view>
							</u-grid-item>
							<u-grid-item>
								<view class="tjItem flex-colum-center">
									<text class="title">本月托管费用</text>
									<text class="value">{{ item.custodyFeesForThisMonth || 0 }}元</text>
								</view>
							</u-grid-item>
							<u-grid-item>
								<view class="tjItem flex-colum-center">
									<text class="title">本月应付费用</text>
									<text class="value">{{ item.payableExpensesForThisMonth || 0 }}元</text>
								</view>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
			</view>
		</mescroll-body>

		<!-- 确认退出登录弹框 -->
		<u-modal
			title="提示"
			content="您确定退出登录吗?"
			:show="showLoginOut"
			showCancelButton
			@confirm="confirmLoginOut"
			@cancel="showLoginOut = false"
		></u-modal>
		<!-- 租户弹框 -->
		<u-picker
			title="请选择租户"
			closeOnClickOverlay
			:show="showTenant"
			:columns="tenantList"
			keyName="tenantName"
			@cancel="showTenant = false"
			@close="showTenant = false"
			@confirm="chooseTenant"
		></u-picker>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import * as carOwnerApi from '@/api/carOwner-api.js';
export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			offsetTop: 0,
			showLoginOut: false,
			list: [],
			tenantList: [],
			showTenant: false,
			currentTenantObj: {}
		};
	},
	onLoad() {
		this.offsetTop = uni.getSystemInfoSync()['statusBarHeight'] + (92 / 750) * uni.getSystemInfoSync().windowWidth - 0.5;
		this.getTenantList();
	},
	methods: {
		// 租户列表
		getTenantList() {
			carOwnerApi.findMyTenantList(this.$store.state.user.phone).then(res => {
				const tenantList = res.data || [];
				if (tenantList.length > 0) {
					this.currentTenantObj = tenantList[0];
					this.tenantList = [tenantList];
				}
			});
		},
		// 选择租户
		chooseTenant(e) {
			this.currentTenantObj = e.value[0];
			this.showTenant = false;
			this.mescroll.triggerDownScroll();
		},
		//获取列表
		upCallback(page) {
			setTimeout(() => {
				let param = {
					pageNum: page.num,
					pageSize: page.size,
					phone: this.$store.state.user.phone,
					tenantId: this.currentTenantObj.tenantId||1
				};
				carOwnerApi
					.getMySelfList(this.toParams(param))
					.then(res => {
						//设置列表数据
						if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(res.rows); //追加新数据
						this.mescroll.endBySize(res.rows.length, res.total);
					})
					.catch(() => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					});
			}, 1000);
		},
		goDetail(item) {
			uni.navigateTo({
				url: '/car/detail?carId=' + item.id
			});
		},

		// 确定退出登录
		confirmLoginOut() {
			uni.clearStorageSync();
			this.$store.commit('user/saveIsLogin', false);
			this.$store.commit('user/saveToken', '');
			this.$store.commit('user/saveUserInfo', null);
			uni.reLaunch({
				url: '/pages/login/login'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.tenantBox {
	flex: 1;
	padding: 32rpx 44rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	color: #2879ff;
	font-size: 28rpx;
	background-color: #f5f5f5;
}
.mainBox {
	padding: 20rpx;
	padding-bottom: 0;
	.carItem {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx 24rpx;
		margin-bottom: 32rpx;
		.carInfo {
			.carNo {
				color: #333333;
				font-size: 28rpx;
			}
			.carModel {
				color: #666666;
				font-size: 24rpx;
			}
			.carStatus {
				width: 108rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				border-radius: 8rpx;
				font-size: 24rpx;
				background: #e6ebf9;
				color: #878ea6;
				border: 2rpx solid #adb5cc;
				&.active {
					background: #e3fffe;
					color: #02bfbe;
					border: 2rpx solid #02bfbe;
				}
			}
		}
		.carStatistics {
			margin-top: 32rpx;
			background: #f1f6ff;
			border-radius: 8rpx;
			.tjItem {
				padding-bottom: 20rpx;

				.value {
					font-size: 32rpx;
					color: #333;
					margin-top: 8rpx;
				}

				.title {
					font-size: 24rpx;
					color: #666;
					margin-top: 20rpx;
				}
			}
		}
	}
}

/deep/ .u-border-bottom {
	border-color: rgba(22, 115, 255, 0.3) !important;
	border-bottom-style: dashed !important;
}

/deep/ .u-border-right {
	border-color: rgba(22, 115, 255, 0.3) !important;
	border-right-style: dashed !important;
}

/deep/ .u-border-left {
	border-color: rgba(22, 115, 255, 0.3) !important;
	border-left-style: dashed !important;
}

/deep/ .u-border-top {
	border-color: rgba(22, 115, 255, 0.3) !important;
	border-top-style: dashed !important;
}
</style>
